<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>计算应退税额</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet" />
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
        <style>
            .form-content {
                text-align: center;
                width: 600px;
                margin: 0 auto;
                border: 1px solid #ccc;
                padding: 20px;
            }
            .form-title {
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 20px;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <el-form :model="formModel" label-width="140px" class="form-content">
                <div class="form-title">应退税额计算</div>
                <el-form-item label="年总收入" prop="yearTotal">
                    <el-input-number v-model="formModel.yearTotal" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="已缴纳税额" prop="alreadyTax">
                    <el-input-number v-model="formModel.alreadyTax" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="五险一金总额(年)" prop="socialMoney">
                    <template #label>
                        五险一金总额
                        <el-tooltip class="item" effect="dark" content="打开个税查看个人月收入的本期专项扣除*12" placement="top-start">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </template>
                    <el-input-number v-model="formModel.socialMoney" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="专项附加扣除" prop="specialMoney">
                    <el-input-number v-model="formModel.specialMoney" :min="0"></el-input-number>
                    <div>
                        <el-button type="primary" @click="handleChooseSpecialMoney" style="margin-top: 10px">查看专项附加扣除标准</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="需要纳税的部分"> {{getNeedMoney }} </el-form-item>
                <el-form-item label="应退/缴税额"> {{getBackMoney}} </el-form-item>
            </el-form>
            <el-dialog title="专项附加扣除" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
                <el-table :data="specialList" border stripe>
                    <el-table-column label="类别" prop="title"></el-table-column>
                    <el-table-column label="扣费标准" prop="standard"></el-table-column>
                    <el-table-column label="描述" prop="describe"></el-table-column>
                </el-table>
            </el-dialog>
        </div>
        <script>
            var vue = new Vue({
                el: "#app",
                data() {
                    return {
                        formModel: {
                            yearTotal: undefined,
                            alreadyTax: undefined,
                            socialMoney: undefined,
                            specialMoney: undefined
                        },
                        noTax: 60000,
                        dialogVisible: false,
                        rateList: [
                            {
                                min: 0,
                                max: 36000,
                                rate: 0.03,
                                num: 0
                            },
                            {
                                min: 36000,
                                max: 144000,
                                rate: 0.1,
                                num: 2520
                            },
                            {
                                min: 144000,
                                max: 300000,
                                rate: 0.2,
                                num: 16920
                            },
                            {
                                min: 300000,
                                max: 420000,
                                rate: 0.25,
                                num: 31920
                            },
                            {
                                min: 420000,
                                max: 660000,
                                rate: 0.3,
                                num: 52920
                            },
                            {
                                min: 660000,
                                max: 960000,
                                rate: 0.35,
                                num: 85920
                            },
                            {
                                min: 960000,
                                max: Number.POSITIVE_INFINITY,
                                rate: 0.45,
                                num: 181920
                            }
                        ],
                        specialList: [
                            {
                                title: "子女教育",
                                standard: "2000元/月/每孩",
                                describe: "一个孩子一个月2000，最后结果取年，例如填了该项1个孩子，则该项年专项附加为1*2000*12=24000元"
                            },
                            {
                                title: "继续教育",
                                standard: "学历类每月400，其他类拿证当年按3600算",
                                describe: "学历类一个月400，一年4800，非学历类直接按3600算"
                            },
                            {
                                title: "大病医疗",
                                standard: "80000内据实扣除",
                                describe: "80000内据实扣除"
                            },
                            {
                                title: "住房贷款(和租房二选一)",
                                standard: "1000/月",
                                describe: "一年12000，直接按12000算"
                            },
                            {
                                title: "租房(和贷款二选一)",
                                standard: "直辖市/省会 1500/月，市籍人口>100万  1100/月，其他800/月",
                                describe: "省会/直辖市按18000，市籍>100万按13200，其他按9600"
                            },
                            {
                                title: "赡养老人",
                                standard: "建议根据上一年度的实际填写",
                                describe: "建议根据上一年度的实际填写"
                            },
                            {
                                title: "三岁以下婴幼儿照护",
                                standard: "2000元/月/每孩",
                                describe: "一个孩子一个月2000，最后结果取年，例如填了该项1个孩子，则该项年专项附加为1*2000*12=24000元"
                            }
                        ]
                    };
                },
                computed: {
                    getNeedMoney() {
                        const { yearTotal, socialMoney, specialMoney } = this.formModel;
                        if (this.isEmpty(yearTotal) || this.isEmpty(socialMoney) || this.isEmpty(specialMoney)) return 0;
                        if (this.formModel.yearTotal <= this.noTax) return 0;
                        return parseFloat((this.formModel.yearTotal - this.noTax - this.formModel.socialMoney - this.formModel.specialMoney).toFixed(2));
                    },
                    getBackMoney() {
                        const { yearTotal, alreadyTax, socialMoney, specialMoney } = this.formModel;
                        if (this.isEmpty(yearTotal) || this.isEmpty(alreadyTax) || this.isEmpty(socialMoney) || this.isEmpty(specialMoney)) return 0;
                        const findItem = this.rateList.find((item) => item.min <= this.getNeedMoney && item.max > this.getNeedMoney);
                        if (!findItem) return 0;
                        return (this.formModel.alreadyTax - (this.getNeedMoney * findItem.rate - findItem.num)).toFixed(2);
                    }
                },
                methods: {
                    isEmpty(value) {
                        return !value && value !== 0;
                    },

                    handleChooseSpecialMoney() {
                        this.dialogVisible = true;
                    },

                    handleClose() {
                        this.dialogVisible = false;
                    }
                }
            });
        </script>
    </body>
</html>
